@charset "utf-8";
/* 外部CSS文件，第一行：控制乱码 */
/* 第二行：设置页面通用样式 */
*{
	/* 所有元素存在盒模型：内外边距+边框+内容组成 
	但是，有些元素自带外边距:body、p、ul/ol
	*/
   margin: 0;
   padding: 0;
   /* 文字：家族、尺寸*/
   font-family:"华文彩云";
   font-size: 100px;
}


/* 测试：外部css文件是否关联添加背景 */
body{
	background-color: #c80f9d;
	/* 背景属性【复合属性】：可以省略部分属性值的属性
	属性值：color, image, origin 与 size, repeat 
	常用背景属性：url()   repeat;
	子属性与主属性使用一致！
	子属性：background-color 背景颜色
	       background-image 背景图片  属性值：url(图片路径)、url("",'')
		   background-size  背景尺寸：宽 高
		   background-repeat 背景平铺  no-repeat
	注意：设置背景图之后立马加背景图宽高！
	背景属性与图片元素区别？
	背景属性，频繁移动的元素
	图片元素，出现固定在页面
	
	 */
	background: #f00;
	background-image: url(../img/bg.jpg);/* 背景图 */
	
	background-repeat: no-repeat;
	background:url(../img/bg.jpg) no-repeat;
	background-size:100% 861px;
	
	
}
/* 熊 */
.bear{
	width:200px;
	height:300px;
	/* 验证选择器是否选中 */
	bor der:1px solid red;
	background:url(../img/bear_1.png);
	background-size: 100% 100%;
	position: relative;
	left:18px;
	top:53px;
	/* 熊div元素添加动画：启动关键帧 */
	animation: bear 10s linear infinite;
}
/* 1个动画：创建1个关键帧 特点：具体元素上启动关键帧存在继承性
                             宽高、背景、定位属性被继承
*/
@keyframes bear{
	0%{/* 初始化 */
		left:18px;
		top:53px;
	}
	10%{
		left:885px;
		top:-21px;
		background:url(../img/bear_1.png);
		background-size: 100% 100%;
		
		}
	20%{
		left:604px;
		top:369px;;
		background:url(../img/bear_2.png);
		background-size: 100% 100%;
	}
	30%{
		left:335px;
		top:224px;
		background:url(../img/bear_3.png);
		background-size: 100% 100%;
	}
	40%{
		left:749px;
		top:372px;
		background:url(../img/.png);
		background-size: 100% 100%;
	}
	50%{
		left:1062px;
		top:190px;
		background:url(../img/bear_5.png);
		background-size: 100% 100%;
	}
	60%{
		left:705px;
		top:-63px;
		background:url(../img/bear_6.png);
		background-size: 100% 100%;
	}
	70%{
		left:823px;
		top:284px;
		background:url(../img/bear_7.png);
		background-size: 100% 100%;
	}
	80%{
		left:1045px;
		top:412px;
		background:url(../img/bear_8.png);
		background-size: 100% 100%;
		}
	90%{
		left:1180px;
		top:82px;
		background:url(../img/bear_9.png);
		background-size: 100% 100%;
	}
	100%{
		left:1251px;
		top:289px;
		background:url(../img/bear_10.png);
		background-size: 100% 100%;
	}
}